<!-- 主体部分的左侧导航栏 -->
<template>
  <div class="leftnav">
    <ul>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">手机 电话卡</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <leftNavChild1 class="leftNavChild"></leftNavChild1>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">电视 盒子</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child2 class="leftNavChild"></left-nav-child2>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">笔记本 显示器</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child3 class="leftNavChild"></left-nav-child3>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">家电 插线板</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child4 class="leftNavChild"></left-nav-child4>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">出行 穿戴</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child5 class="leftNavChild"></left-nav-child5>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">智能 路由器</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child6 class="leftNavChild"></left-nav-child6>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">电源 配件</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child7 class="leftNavChild"></left-nav-child7>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">健康 儿童</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child8 class="leftNavChild"></left-nav-child8>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">耳机 音箱</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child9 class="leftNavChild"></left-nav-child9>
      </li>
      <li class="leftNavItem" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <a href="#">
          <span class="nav-title">生活 箱包</span
          ><span class="iconfont icon-youjiantou_huaban"></span
        ></a>
        <left-nav-child10 class="leftNavChild"></left-nav-child10>
      </li>
    </ul>
  </div>
</template>

<script>
import leftNavChild1 from "@/components/body/leftNav/subNav/leftNavChild1";
import leftNavChild2 from "@/components/body/leftNav/subNav/leftNavChild2";
import leftNavChild3 from "@/components/body/leftNav/subNav/leftNavChild3";
import leftNavChild4 from "@/components/body/leftNav/subNav/leftNavChild4";
import leftNavChild5 from "@/components/body/leftNav/subNav/leftNavChild5";
import leftNavChild6 from "@/components/body/leftNav/subNav/leftNavChild6";
import leftNavChild7 from "@/components/body/leftNav/subNav/leftNavChild7";
import leftNavChild8 from "@/components/body/leftNav/subNav/leftNavChild8";
import leftNavChild9 from "@/components/body/leftNav/subNav/leftNavChild9";
import leftNavChild10 from "@/components/body/leftNav/subNav/leftNavChild10";
export default {
  data() {
    return {};
  },
  components: {
    leftNavChild1,
    leftNavChild2,
    leftNavChild3,
    leftNavChild4,
    leftNavChild5,
    leftNavChild6,
    leftNavChild7,
    leftNavChild8,
    leftNavChild9,
    leftNavChild10,
  },
  methods: {
    mouseenter(e) {
      if (e !== null) {
        e.srcElement.childNodes[1].classList.add("leftNavChildActive");
      }
    },
    mouseleave(e) {
      if (e !== null) {
        e.srcElement.childNodes[1].classList.remove("leftNavChildActive");
      }
    },
  },
};
</script>

<style lang='less' >
.leftnav {
  position: relative;
  width: 234px;
  padding: 20px 0;
  background-color: rgba(105, 101, 101, 0.6);
  font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
    Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;

  .leftNavItem {
    > a {
      display: block;
      box-sizing: border-box;
      padding: 0 30px;
      color: #fff;
      width: 234px;
      height: 42px;
      line-height: 42px;
      .iconfont {
        float: right;
      }
    }
    &:hover {
      background-color: #ff6700;
    }
  }
  &:hover {
    color: #fff;
  }
}
.leftNavChild {
  position: absolute;
  display: none;
  left: 234px;
  top: 0px;
}
.leftNavChildActive {
  display: block;
}
</style>
